<template>
  <div>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>修改密码</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <hr style="border: 1px solid #F2F6FC;margin-top: 20px;">
    <div class="change_pass_box">
      <el-form :model="ruleForm" :rules="rules" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="邮箱" prop="email">
          <el-input type="text" v-model="ruleForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱验证码" prop="emailCode">
          <el-input v-model="ruleForm.emailCode" style="width: 200px;margin-right: 50px;"></el-input>
          <template>
            <el-tooltip placement="top">
              <div slot="content">我们将向您的邮箱发送验证码<br />请注意查收</div>
              <el-button @click="handleSent(ruleForm.email)">发送</el-button>
            </el-tooltip>
          </template>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleForm)">确认</el-button>
          <el-button @click="handleCancer" style="margin-left: 180px;">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mail, changePwd, Logout } from '@/api/api'
export default {
  data () {
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        email: '',
        password: '',
        checkPass: '',
        emailCode: ''
      },
      rules: {
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSent (email) {
      mail(email).then(res => {
        console.log(res.data)
      })
    },
    submitForm (formName) {
      //
      const params = {
        id: this.$store.state.currentId,
        password: formName.password,
        changeVcode: formName.emailCode
      }
      changePwd(params).then(res => {
        console.log(res.data)
        this.$alert('身份验证已过期，请重新登录', '身份验证', {
          confirmButtonText: '确定',
          callback: action => {
            sessionStorage.clear()
            Logout().then(res => {
              console.log(res.data)
            })
            this.$router.push('/mainIndex')
            this.$router.go()
          }
        })
      })
    },
    handleCancer () {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.change_pass_box {
  width: auto;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
